<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, initial-scale=1, shrink-to-fit=no">
    <div th:replace="~{admin/common :: common-link}"></div>
    <style>
        .content {
            margin: 22px auto;
        }

        .emoji-container {
            position: relative;
            display: inline-block;
            height: 32px;
            font-size: 24px;
            margin-top: -5px;
            cursor: pointer;
        }

        .emoji-container .emoji-content {
            position: absolute;
            top: -175px;
            left: -8px;
            width: 410px;
            border: 1px solid #cad9de;
            border-radius: 5px;
            background: #fff;
            z-index: 2;
            box-shadow: 0 1px 10px #e1e1e1;
            transition: all .5s;
            transform: scale(0);
        }

        .big {
            transform: scale(1) !important;
        }

        .emoji-container .emoji-content::after {
            content: "";
            position: absolute;
            width: 10px;
            height: 10px;
            top: 168px;
            left: 15px;
            background: #fff;
            transform: rotate(45deg);
            border-right: 1px solid #b6c5ca;
            border-bottom: 1px solid #b6c5ca;
        }

        .emoji-content .emoji-content-title {
            height: 28px;
            background-color: #cad9de;
            border-radius: 5px 5px 0 0;
        }

        .emoji-content .emoji-content-title a.emoji-close-btn {
            float: right;
            font-size: 14px;
            margin-right: 10px;
        }

        .emoji-content .emoji-content-items {
            padding: 10px;
            height: 144px;
            overflow: auto;
        }

        .emoji-content .emoji-content-items ul {
            width: 372px;
            margin: 0 auto;
            padding: 10px 10px 5px 15px;
            overflow: hidden;
            list-style-type: none;
        }

        .emoji-content .emoji-content-items ul li {
            position: relative;
            z-index: 2;
            float: left;
            width: 32px;
            height: 32px;
            padding: 4px;
            margin-left: -1px;
            margin-top: -1px;
            border: 1px solid #e8e8e8;
            cursor: pointer;
        }

        .emoji-content .emoji-content-items ul li:hover {
            z-index: 3;
            border-color: #eb7350;
        }

        .emoji-content .emoji-content-items ul li img {
            position: absolute;
            top: 4px;
        }
    </style>
</head>
<body>

<div class="content">
    <div class="block block-fx-shadow">
        <div class="block-content">
            <form id="saveForm" class="js-validation-bootstrap" th:action="@{${baseUrl} + '/add.json'}" method="post" th:object="${vo}">
                <div class="form-group row">
                    <label class="col-lg-4 col-form-label" for="postId">文章标题 <span class="text-danger">*</span></label>
                    <div class="col-lg-8">
                        <select class="form-control" id="postId" name="postId">
                            <option value="" disabled selected></option>
                            <option th:each="post:${postList}" th:value="${post.id}" th:text="${post.title}"></option>
                        </select>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-lg-4 col-form-label" for="content">评论内容 <span class="text-danger">*</span> </label>
                    <div class="col-lg-8">
                        <textarea id="content" name="content" class="form-control" aria-label="With textarea" rows="4" style="resize: none" placeholder="内容" data-bv-notempty="true" data-bv-notempty-message="内容不能为空"></textarea>
                    </div>
                </div>
                <div class="form-group">
                    <div class="emoji-container"><div class="emoji-container-btn">☺</div></div>
                    <button type="submit" class="btn btn-alt-primary" style="float: right;" data-dismiss="modal" id="submitBtn">
                        <i class="fa fa-send mr-5"></i> 发送
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
<div th:replace="~{admin/common :: common-script}"></div>
<script th:src="@{'/admin/assets/custom/jquery-comment/jquery-emoji.js'}"></script>
<script type="text/javascript" th:inline="javascript">
    $(function() {
        $("#submitBtn").on("click", function () {
            $.hexo.action.save("saveForm", null, function (resp) {
                $.hexo.modal.tip("评论成功", "success", function () {
                    window.parent.$.hexo.modal.close();
                    window.parent.CommentManager.query();
                });
            });
        });

        let emoji = $.openEmojiPanel("/admin/assets/custom");
        $(".emoji-container").append(emoji);

        $(document).on("click", ".emoji-container-btn,.emoji-close-btn", function (e) {
            let $target = $(e.target);
            if ($target.hasClass("emoji-container-btn")) {
                $target.siblings("div").toggleClass("big");
            } else if ($target.hasClass("emoji-close-btn")) {
                $target.parents(".emoji-content").toggleClass("big");
            }
        });

        // 表情选择事件
        $(document).on("click", ".emoji-content-items ul li", function () {
            let title = $(this).attr("title");
            let textarea = $("#content");
            textarea.val(textarea.val() + "[" + title + "]");
        });

        $(document).on("click", function (e) {
            let $target = $(e.target);

            if ($target.hasClass("emoji-container-btn")) {
                return;
            }

            if ($target.parents(".emoji-content").length > 0) {
                return;
            }

            $(".emoji-content").removeClass("big");
        });
    })
</script>
</body>
</html>